<template>
    <div class="flex items-center justify-between p-4 bg-gradient-to-r from-yellow-200 to-yellow-100 rounded-lg shadow-md">
      <div class="flex items-center space-x-4">
        <img :src="profileImageUrl" alt="profile" class="w-16 h-16 rounded-full bg-yellow-300">
        <div>
          <p class="text-2xl font-bold text-zinc-800">Stephen Hu</p>
          <button class="mt-2 px-4 py-1 text-sm font-medium text-black bg-white border border-zinc-400 rounded-full">
            填写兴趣更懂你
          </button>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img src="../../../assets/设置.png" alt="scan" class="w-6 h-6">
        <div class="relative">
          <img src="../../../assets/邮件.png" alt="settings" class="w-6 h-6">
          <span class="absolute top-0 right-0 inline-block w-2 h-2 bg-red-500 rounded-full"></span>
        </div>
        <div class="relative">
          <img src="../../../assets/通知.png" alt="notifications" class="w-6 h-6">
          <span class="absolute top-0 right-0 inline-block px-1 text-xs font-bold text-white bg-red-500 rounded-full">{{ notificationsCount }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        profileImageUrl: 'https://placehold.co/100x100', // 可以根据需要动态设置
        notificationsCount: 77, // 示例通知数量，实际应用中可以从API获取
      };
    },
  };
  </script>
  
<style>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css";
</style>